<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>星痕订餐</title>
		<!-- 网页头部图标 -->
		<link rel="icon" type="image/x-icon" href="../img/favicon.ico"/>

		<!-- <link rel="stylesheet" href="../css/bootstrap.min.css"/> -->
		<link rel="stylesheet" href="../css/bootstrap.css"/>
		<link rel="stylesheet" href="../css/myindex.css"/>
		<link rel="stylesheet" href="../css/login.css"/>
		
		
		<script src="../js/jQuery.js"></script>
		<script src="../js/bootstrap.min.js"></script>
	</head>
	
	<body>
		<!-- 登录页面 -->
		<div class="thisLogin hidden" >
			<form class="login-form">
				<div class="cancel">
						<img src="../img/cancel.svg"/>
				</div>
				<h2>用户登录</h2>
				<div class="item">
					<label for="username">手机号</label>
					<input type="text" name="username" id="username" value="likaiping"/>
				</div>
				<div class="item">
					<label for="password">密码</label>
					<input type="password" name="password" id="password" value="12345678"/>
				</div>
				
				<div class="mainind">
					<input class="indentify-password" placeholder="输入验证码"/>
					<div class="indentify">发送验证码</div>
					<span class="timmer"></span>
				</div>
				
				<div class="item">
					<input type="submit" value="登录"/>
				</div>
			</form>
		</div>
		<!-- 导航栏 -->
		<div class="nav">
			<ul class="nav-left">
				<!-- 生成的文字内容由HTML写出改变为用js生成，详情见于js文件 -->
			</ul>	
			<ul class="nav-right">
				<li><a href="">个人中心</a></li>
				<li id="displayLogin"><a>登录</a></li>
				<li><a href="">注册</a></li>
				<li id="twoc">
					<a href="">扫码</a>
					<div class="twoCode">
						<img src="../img/towcode.png"/>
						<span>扫码添加作者微信</span>
					</div>
				</li>
			</ul>
		</div>
		<div class="menu">
			<ul class="category"> <!--category表示左侧菜单栏-->
				<!-- 生成的文字内容由HTML写出改变为用js生成，详情见于js文件 -->
			</ul>
		</div>
		<div class="twoCode"></div>
		
		<!-- 搜索框 -->
		<div class="searchMeun">
			<form class="search">
				<div class="seaStyle">
					<input class="searchKuang" type="search" placeholder=" 搜索商品">
					<button class="searchButton" type="submit">搜 索</button>
				</div>
			</form>
			<div id="recentSearch" class="hidden"><span> 最近搜索 :</span></div>
		</div>
		
		
		<!-- 轮播图开始 -->
		<div class="meun">
			<ul class="swapper" id="swapper1">
				<div class="before hidden">&lt;</div>
				<li>
					<img src="../img/p1.jpg"/>
					<div>食品介绍：羊肉粉是贵州省的一种著名民间小吃，也是“中华名小吃”，属于黔菜，该菜品是当今大多数贵州人早、午餐的最爱</div>
				</li>
				<li>
					<img src="../img/p2.jpg"/>
					<div>食品介绍：粽子，由粽叶包裹糯米蒸制而成的食品，是中国传统节庆食物之一。粽子作为中国历史文化积淀最深厚的传统食品之一，传播亦甚远。</div>
				</li>
				<li>
					<img src="../img/p3.jpg"/>
					<div>食品介绍：年糕是用大米或糯米，煮成饭用打制或水磨成粉后压制而成的糕，在春节，我国很多地区都有讲究吃年糕。</div>
				</li>
				<div class="after hidden">&gt;</div>
				<div class="poiner">
					<div class="cycle"></div>
					<div class="cycle"></div>
					<div class="cycle"></div>
				</div>
			</ul>
			<ul class="swapper" id="swapper2">
				<div class="before hidden" id="foretow">&lt;</div>
				<li><img src="../img/lunbo2/p1.jpg" id="img1"/></li>
				<li><img src="../img/lunbo2/p2.jpg"/></li>
				<li><img src="../img/lunbo2/p3.jpg"/></li>
				<div class="after hidden">&gt;</div>
				<div class="poiner">
					<div class="cycle"></div>
					<div class="cycle"></div>
					<div class="cycle"></div>
				</div>
			</ul>
			<ul class="swapper" id="swapper3">
				<div class="before hidden">&lt;</div>
				<li><img src="../img/lunbo3/p1.jpg"/></li>
				<li><img src="../img/lunbo3/p2.jpg"/></li>
				<li><img src="../img/lunbo3/p3.jpg"/></li>
				<div class="after hidden">&gt;</div>
				<div class="poiner">
					<div class="cycle"></div>
					<div class="cycle"></div>
					<div class="cycle"></div>
				</div>
			</ul>
		</div>
		
		<!-- 引入bootstrap组件 作为商品购卡片-->
		<div class="container" id="shopProductList">
		  <div class="row">
			<!-- 一行最多显示12个，显示一个则除以12得一个，除以6得两个……以此类推 -->
		    <div class="col col-12 col-sm-6 col-lg-4 col-xl-3">
		      <div class="card">
		        <img src="../img/p1.jpg" class="card-img-top" alt="...">
		        <div class="card-body">
		          <h5 class="card-title">水城羊肉粉</h5>
				  <h6>11.0元</h6>
		          <p class="card-text">羊肉粉是贵州省的一种著名民间小吃，也是“中华名小吃”，属于黔菜，该菜品是当今大多数贵州人早、午餐的最爱。</p>
		          <a class="btn btn-primary">加入购物车</a>
		        </div>
		      </div>
		    </div>
			<div class="col col-12 col-sm-6 col-lg-4 col-xl-3">
			  <div class="card">
			    <img src="../img/p2.jpg" class="card-img-top" alt="...">
			    <div class="card-body">
			      <h5 class="card-title">粽子</h5>
				  <h6>5.0元</h6>
			      <p class="card-text">粽子，由粽叶包裹糯米蒸制而成的食品，是中国传统节庆食物之一。粽子作为中国历史文化积淀最深厚的传统食品之一。</p>
			      <a class="btn btn-primary">加入购物车</a>
			    </div>
			  </div>
			</div>
			<div class="col col-12 col-sm-6 col-lg-4 col-xl-3">
			  <div class="card">
			    <img src="../img/p3.jpg" class="card-img-top" alt="...">
			    <div class="card-body">
			      <h5 class="card-title">年糕</h5>
				  <h6>6.0元</h6>
			      <p class="card-text">年糕是用大米或糯米，煮成饭用打制或水磨成粉后压制而成的糕，在春节，我国很多地区都有讲究吃年糕。阿巴阿巴阿巴阿巴</p>
			      <a class="btn btn-primary">加入购物车</a>
			    </div>
			  </div>
			</div>
			<div class="col col-12 col-sm-6 col-lg-4 col-xl-3">
			  <div class="card">
			    <img src="../img/lunbo2/p1.jpg" class="card-img-top" alt="...">
			    <div class="card-body">
			      <h5 class="card-title">烤鸭</h5>
				  <h6>18.0元</h6>
			      <p class="card-text">羊肉粉是贵州省的一种著名民间小吃，也是“中华名小吃”，属于黔菜，该菜品是当今大多数贵州人早、午餐的最爱。</p>
			      <a class="btn btn-primary">加入购物车</a>
			    </div>
			  </div>
			</div>
			<div class="col col-12 col-sm-6 col-lg-4 col-xl-3">
			  <div class="card">
			    <img src="../img/lunbo2/p2.jpg" class="card-img-top" alt="...">
			    <div class="card-body">
			      <h5 class="card-title">烤鱼</h5>
				  <h6>58.0元</h6>
			      <p class="card-text">羊肉粉是贵州省的一种著名民间小吃，也是“中华名小吃”，属于黔菜，该菜品是当今大多数贵州人早、午餐的最爱。</p>
			      <a class="btn btn-primary">加入购物车</a>
			    </div>
			  </div>
			</div>
			<div class="col col-12 col-sm-6 col-lg-4 col-xl-3">
			  <div class="card">
			    <img src="../img/lunbo2/p3.jpg" class="card-img-top" alt="...">
			    <div class="card-body">
			      <h5 class="card-title">脆皮五花肉</h5>
				  <h6>38.0元</h6>
			      <p class="card-text">羊肉粉是贵州省的一种著名民间小吃，也是“中华名小吃”，属于黔菜，该菜品是当今大多数贵州人早、午餐的最爱。</p>
			      <a class="btn btn-primary">加入购物车</a>
			    </div>
			  </div>
			</div>
			<div class="col col-12 col-sm-6 col-lg-4 col-xl-3">
			  <div class="card">
			    <img src="../img/lunbo3/p1.jpg" class="card-img-top" alt="...">
			    <div class="card-body">
			      <h5 class="card-title">蜜雪冰城</h5>
				  <h6>6.0元</h6>
			      <p class="card-text">羊肉粉是贵州省的一种著名民间小吃，也是“中华名小吃”，属于黔菜，该菜品是当今大多数贵州人早、午餐的最爱。</p>
			      <a class="btn btn-primary">加入购物车</a>
			    </div>
			  </div>
			</div>
			<div class="col col-12 col-sm-6 col-lg-4 col-xl-3">
			  <div class="card">
			    <img src="../img/lunbo3/p2.jpg" class="card-img-top" alt="...">
			    <div class="card-body">
			      <h5 class="card-title">书亦烧仙草</h5>
				  <h6>10.0元</h6>
			      <p class="card-text">羊肉粉是贵州省的一种著名民间小吃，也是“中华名小吃”，属于黔菜，该菜品是当今大多数贵州人早、午餐的最爱。</p>
			      <a class="btn btn-primary">加入购物车</a>
			    </div>
			  </div>
			</div>
			
		  </div>
		</div>
		
		<!-- 加入购物车后提示加入成功 -->
		<div id="buySuccesskp" class="hidden">
				<span>加入购物车成功</span>
		</div>
		
		<!-- AJAX的API接口连接 查询天气 -->
		<div class="newWeather">
			<div class="searchWeather">
				<span>点击查询天气信息</span>
			</div>
			<div class="recycleWeather hidden">
				<span>点击收起天气信息</span>
			</div>
		</div>
		<div class="weatherApi">
			<div class="city"></div>
			<div class="weatherContent">
				
			</div>
			<div class="weatherForecast">
				<ul>
					
				</ul>
			</div>
		</div>
		<!-- echart图表：2. 创建一个div作为图表的容器 -->
		<div class="priceEchart">
			<div class="whiteBack"></div>
			<div id="echartMain" style="width:850px; height: 510px;"></div>
		</div>
		
		<!-- 页面底部信息 -->
		<div class="bottomMessage">
			<div class="btmMessContent">
				<div class="logoBottom"><img src="../img/favicon.ico"/></div>
				<div class="messageContent">
					<span>星痕订餐 | 好评反馈 | 举报投诉 | 联系骑手 | 联系商家 | 联系作者 | 页面反馈 |</span>
					<div class="typeFlex">
						<ul>商品类型
							<li>主食类</li>
							<li>副食品</li>
							<li>甜点类</li>
							<li>饮品类</li>
							<li>饮品类</li>
							<li>饮品类</li>
							<li>饮品类</li>
						</ul>
						<ul>服务类型
							<li>主食类</li>
							<li>副食品</li>
							<li>甜点类</li>
							<li>饮品类</li>
							<li>饮品类</li>
							<li>饮品类</li>
							<li>饮品类</li>
						</ul>
						<ul>物流类型
							<li>主食类</li>
							<li>副食品</li>
							<li>甜点类</li>
							<li>饮品类</li>
							<li>饮品类</li>
							<li>饮品类</li>
							<li>饮品类</li>
						</ul>
					</div>
					
				</div>
				<div class="phoneBottom">
					<ul>
						<li>在线客服</li>
						<li>24小时服务热线<h5>1234-77889956</h5></li>
						<li>监督邮箱</li>
						<li>关注星痕</li>
					</ul>
				</div>
			</div>
		</div>
		
	</body>
</html>
<!-- echart图表：1.引入js -->
<script src="../js/echarts.min.js"></script>

<script src="../js/myindex.js"></script>
<script src="../js/login.js"></script>
<script src="../js/weatherAjax.js"></script>
<script src="../js/echartStar.js"></script>